<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	
	<!-- mobile meta tag -->		
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>Regular Blog - Sympathique</title> 
	
	<!-- main style -->
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	
	<!-- color scheme -->
	<link rel="stylesheet" type="text/css" href="color-schemes/red/red.css" media="screen" title="red" />
	<link rel="stylesheet" type="text/css" href="color-schemes/yellow/yellow.css" media="screen" title="yellow" />
	<link rel="stylesheet" type="text/css" href="color-schemes/orange/orange.css" media="screen" title="orange" />
	<link rel="stylesheet" type="text/css" href="color-schemes/blue/blue.css" media="screen" title="blue" />
	<link rel="stylesheet" type="text/css" href="color-schemes/green/green.css" media="screen" title="green" />
	<link rel="stylesheet" type="text/css" href="color-schemes/purple/purple.css" media="screen" title="purple" />
	
	<!--miscellaneous-->
	<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
	<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/audioplayer.css" media="screen" />	
	
	<!-- revolution slider settings -->
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />		

	<!-- setting mobile environment -->		
	<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen" />	
	
	<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css">
	<![endif]-->
	
	<!--[if lt IE 9]>
	<script src="../../../html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/hoverIntent.js"></script>
	<script type="text/javascript" src="js/superfish.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
	<script type="text/javascript" src="js/jquery.tweet.js"></script>
	<script type="text/javascript" src="js/jflickrfeed.js"></script>
	<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
	<script type="text/javascript" src="js/slides.min.jquery.js"></script>
	<script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
	<script type="text/javascript" src="js/jquery.contact.js"></script>
	<script type="text/javascript" src="js/jquery.preloadify.min.js"></script>
	<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
	
	<!-- jQuery Revolution Slider -->
	<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
	<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
	
	<script type="text/javascript" src="js/custom.js"></script>
	
	<link rel="stylesheet" type="text/css" href="template-changer.css" media="screen"/>		
	<script type="text/javascript" src="js/jquery.cookie.js"></script>	
	<script type="text/javascript" src="js/styleswitch.js"></script>	
	
	<!-- Google Web Fonts -->
	<link href='../../../fonts.googleapis.com/css@family=Open+Sans_3A300,400,600,700' rel='stylesheet' type='text/css'>


<script type="text/javascript">
	$(function()
		{
			// Call stylesheet init so that all stylesheet changing functions 
			// will work.
			$.stylesheetInit();
			
			// This code loops through the stylesheets when you click the link with 
			// an ID of "toggler" below.
			$('#toggler').bind(
				'click',
				function(e)
				{
					$.stylesheetToggle();
					return false;
				}
			);
			
			// When one of the styleswitch links is clicked then switch the stylesheet to
			// the one matching the value of that links rel attribute.
			$('.styleswitch').bind(
				'click',
				function(e)
				{
					$.stylesheetSwitch(this.getAttribute('rel'));
					return false;
				}
			);
		}
	);
</script>	
	
</head>
<body>
 

<!-- setting a fullscreen image as background:
<img id="bg" src="images/apple.jpg" alt="apple-background" />
-->


	<div class="theme-changer-wrap">
		<div class="theme-changer">
			<div class="changer-inner">				
				<span> COLOR SCHEME </span>
					<ul id="colors">
						<li><a href="blog.html@style=yellow" rel="yellow" class="styleswitch color-yellow">yellow</a></li>
						<li><a href="blog.html@style=orange" rel="orange" class="styleswitch color-orange">orange</a></li>
						<li><a href="blog.html@style=blue" rel="blue" class="styleswitch color-blue">blue</a></li>
						<li><a href="blog.html@style=green" rel="green" class="styleswitch color-green">blue</a></li>
						<li><a href="blog.html@style=red" rel="red" class="styleswitch color-red">blue</a></li>
						<li><a href="blog.html@style=purple" rel="purple" class="styleswitch color-purple">blue</a></li>
					
					</ul>
					<div style="clear:both; height:10px; width:100%"></div>				
			</div>
		</div>
		<div class="open-close"></div>
	</div> 	
<div id="wrapper">
	<header id="header">
		<div class="centered-wrapper">
			<div class="one-third">
				<div class="logo"><a href="index.html"></a></div>
			</div><!--end one-third-->
			
			<div class="two-third column-last">		
				<nav id="navigation">
					<ul id="mainnav">
						<li><a href="index.html"><span>HOME</span></a>
							<ul>
								<li><a href="index.html">Home Version 1</a></li>
								<li><a href="index-2.html">Home Version 2</a></li>
								<li><a href="index-3.html">Home Version 3</a></li>
								<li><a href="index-4.html">Home Version 4</a></li>
								<li><a href="index-onepage.html">Home One Page</a></li>
							</ul>							
						</li>
						<li><a href="#"><span>PAGES</span></a>
							<ul>
								<li><a href="gallery.html">Gallery</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="about-us.html">About Us</a></li>
								<li><a href="pricing.html">Pricing Options</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
							</ul>
						</li>
						<li><a href="#"><span>FEATURES</span></a>
							<ul>								
								<li><a href="typography.html">Typography</a></li>
								<li><a href="columns.html">Columns</a></li>
								<li><a href="buttons-and-boxes.html">Buttons and Boxes</a></li>
								<li><a href="tabs-and-toggles.html">Tabs and Toggles</a></li>
								<li><a href="tables-and-lists.html">Tables and Lists</a></li>
								<li><a href="#">3rd Level Nav</a>
									<ul>
										<li><a href="#">this is</a></li>
										<li><a href="#">a third level</a></li>
										<li><a href="#">nav menu</a></li>
									</ul>							
								</li>
							</ul>				
						</li>						
						<li><a href="portfolio-four-columns.html"><span>PORTFOLIO</span></a>
							<ul>
								<li><a href="portfolio-grid.html">Grid Layout</a></li>
								<li><a href="portfolio-four-columns.html">4 Columns</a></li>
								<li><a href="portfolio-three-columns.html">3 Columns</a></li>
								<li><a href="portfolio-two-columns.html">2 Columns</a></li>
								<li><a href="portfolio-single.html">Portfolio Single</a></li>
							</ul>		
						</li>
						<li><a href="blog-masonry-2-columns.html"><span>BLOG</span></a>
							<ul>
								<li><a href="blog-masonry-2-columns.html">Masonry Layout 1</a></li>
								<li><a href="blog-masonry-3-columns.html">Masonry Layout 2</a></li>
								<li><a class="current" href="blog.html">Regular Layout</a></li>
								<li><a href="blog-single.html">Blog Post</a></li>
							</ul>
						</li>
						<li><a href="contact.html"><span>CONTACT</span></a>
							<ul>
								<li><a href="contact.html">Contact Layout 1</a></li>
								<li><a href="contact-fullwidth.html">Contact Layout 2</a></li>
							</ul>						
						</li>
					</ul>
				</nav><!--end navigation-->
			</div><!--end two-third-->
		<div class="clear"></div>			
		</div><!--end centered-wrapper-->
	</header>	
	
	<div class="top-shadow"></div>
	
	<section class="page-title">
	<div class="page-background">
		<div class="pattern1"></div>
	</div>
	<div class="bottom-shadow"></div>
		<div class="title-wrapper">
			<div class="title-bg">
				<div class="title-content">
					<h2>Blog - Regular Layout</h2>
					<div class="clear"></div>
				</div><!--end title-content-->
			</div>
		</div><!--end title-wrapper-->
	</section>	

	<div class="centered-wrapper">	
		<section id="blog-page">
			<div id="posts">
				<article class="post regular-article">												
					<div class="post-thumbnail">
						<a href="#">
							<span class="item-on-hover"><span class="hover-link"></span></span>
							<img src="images/blog/blog-image1.jpg" alt="" />
						</a>
					</div><!--end post-thumbnail-->
					<div class="post-content">
						<span class="masonry-post-meta">
							7 Jan 2012 / <a href="#">Articles</a> / <a href="#">3 Comments</a>
						</span>
						<i class="icon-pencil"></i>						
						<div class="clear"></div>
						<h1><a href="#">The Secrets Behind Identity Branding</a></h1>
						
						<p>Etiam pellentesque, magna eget lobortis placerat, leo leo consequat ante, non iaculis turpis augue ac ligula. Nunc blandit tincidunt consequat. Duis diam metus, suscipit in pulvinar eget, egestas id arcu. Duis a enim vel mauris ultrices. Nullam aliquet velit ac velit tempus in semper neque auctor. Aenean ligula mi, auctor sed tempus ultrices, semper tempus diam.</p>
						<a class="button red" href="#">Read More</a>

					</div><!--end post-content-->
				</article>
				
				<article class="post gallery-article">												
					<div class="post-thumbnail">
						<div class="blog-slides">
							<div class="slides_container">
								<div class="slide">
									<a href="images/blog/image-gallery1.jpg" rel="prettyPhoto[pp_gal]" title="Gallery Image 1"><img src="images/blog/image-gallery1.jpg" width="695" height="400" alt="Slide 1"></a>
								</div>
								<div class="slide">
									<a href="images/blog/image-gallery2.jpg" rel="prettyPhoto[pp_gal]" title="Gallery Image 2"><img src="images/blog/image-gallery2.jpg" alt="Slide 2"></a>
								</div>	
								<div class="slide">
									<a href="images/blog/image-gallery3.jpg" rel="prettyPhoto[pp_gal]" title="Gallery Image 3"><img src="images/blog/image-gallery3.jpg" alt="Slide 3"></a>
								</div>							
							</div>
							<a href="#" class="prev"><img src="images/blog-arrow-prev.png" width="27" height="43" alt="Arrow Prev"></a>
							<a href="#" class="next"><img src="images/blog-arrow-next.png" width="27" height="43" alt="Arrow Next"></a>
						</div><!--end slides-->
					</div><!--end post-thumbnail-->
					<div class="post-content">
						<span class="masonry-post-meta">
							7 Jan 2012 / <a href="#">Articles</a> / <a href="#">3 Comments</a>
						</span>
						<i class="icon-pencil"></i>						
						<div class="clear"></div>
						<h1><a href="#">Case Study: Envato Website Redesign</a></h1>
						
						<p>Etiam pellentesque, magna eget lobortis placerat, leo leo consequat ante, non iaculis turpis augue ac ligula. Nunc blandit tincidunt consequat. Duis diam metus, suscipit in pulvinar eget, egestas id arcu. Duis a enim vel mauris ultrices. Nullam aliquet velit ac velit tempus in semper neque auctor. Aenean ligula mi, auctor sed tempus ultrices, semper tempus diam.</p>
						<a class="button red" href="#">Read More</a>

					</div><!--end post-content-->
				</article>	

				<article class="post quote-article">												
					<div class="post-content">
						<span class="masonry-post-meta">
							7 Jan 2012 / <a href="#">Wise Words</a> / <a href="#">3 Comments</a>
						</span>
						<i class="icon-quote-left"></i>
						<blockquote class="masonry-excerpt">Good design is all about making other designers feel like idiots because that idea wasn’t theirs.</blockquote>
						<h4 class="quote-author">- Frank Chimero</h4>

					</div><!--end post-content-->
				</article>
				
				<article class="post vimeo-article">												
					<div class="masonry-thumbnail">
						<iframe src="../../../player.vimeo.com/video/12158329@color=ffffff" width="780" height="439" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>				
					</div>
					<div class="post-content">
						<span class="masonry-post-meta">
							7 Jan 2012 / <a href="#">Articles</a> / <a href="#">3 Comments</a>
						</span>
						<i class="icon-facetime-video"></i>
						<h1 class="masonry-title"><a href="#">How Videos Can Help Promote Your Business</a></h1>
						<p>Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus. Donec id ligula ut tellus ultricies ornare quis vel nunc. In id purus vel magna porta laoreet at a dolor. Aliquam aliquam mollis feugiat.</p>
						<a class="button red" href="#">Read More</a>

					</div><!--end post-content-->
				</article>				
				
				<article class="post music-article">												
					<div class="post-content">
						<span class="masonry-post-meta">
							7 Jan 2012
						</span>
						<i class="icon-music"></i>
						<div id="audio_jplayer" class="jp-jplayer"></div>
						<div id="jp_container_1" class="jp-audio">
							<div class="jp-type-single">
								<div class="jp-gui jp-interface">
									<div class="jp-controls">
										<a href="javascript:;" class="jp-play" tabindex="1">play</a>
										<a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
										<div class="jp-current-time"></div>
										<div class="jp-progress">
											<div class="jp-seek-bar">
												<div class="jp-play-bar"></div>
											</div>
										</div>
										<div class="jp-volume-bar">
											<div class="jp-volume-bar-value"></div>
										</div>																

										<a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
										<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
										<div class="jp-duration"></div>								
									</div>
								</div>
								<div class="jp-no-solution">
									<span>Update Required</span>
									To play the media you will need to either update your browser to a recent version or update your <a href="../../../get.adobe.com/flashplayer/default.htm" target="_blank">Flash plugin</a>.
								</div>
							</div>
						</div>
						<div class="clear"></div>
						<h1><a href="#">Audio Post</a></h1>
						<p>Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus. Donec id ligula ut tellus ultricies ornare quis vel nunc. In id purus vel magna porta laoreet at a dolor. Aliquam aliquam mollis feugiat.</p>
						<a class="button red" href="#">Read More</a>

					</div><!--end post-content-->
				</article>					
				
				<article class="post regular-article">												
					<div class="post-thumbnail">
						<a href="#">
							<span class="item-on-hover"><span class="hover-link"></span></span>
							<img src="images/blog/blog-image3.jpg" alt="" />
						</a>
					</div><!--end post-thumbnail-->
					<div class="post-content">
						<span class="masonry-post-meta">
							7 Jan 2012 / <a href="#">Articles</a> / <a href="#">3 Comments</a>
						</span>
						<i class="icon-pencil"></i>						
						<div class="clear"></div>
						<h1><a href="#">How Important Are Work Breaks</a></h1>
						
						<p>Etiam pellentesque, magna eget lobortis placerat, leo leo consequat ante, non iaculis turpis augue ac ligula. Nunc blandit tincidunt consequat. Duis diam metus, suscipit in pulvinar eget, egestas id arcu. Duis a enim vel mauris ultrices. Nullam aliquet velit ac velit tempus in semper neque auctor. Aenean ligula mi, auctor sed tempus ultrices, semper tempus diam.</p>
						<a class="button red" href="#">Read More</a>

					</div><!--end post-content-->
				</article>				

				<div class="clear"></div>	
						
				<div class="pagenav">
					<span class="pages">Page 1 of 3</span>
					<span class="current">1</span>
					<a href="#" class="page">2</a>
					<a href="#" class="page">3</a>
					<a href="#" class="nextpostslink">&raquo;</a>
				</div> 				
		
			</div><!--end posts-->
		</section>
		
		<aside id="sidebar">
			<div class="widget recent-posts">
				<h3>Recent Posts</h3>
				<div class="sidebar-post">
					<h5><a href="blog-single.html">The Secrets Behind Identity Branding</a></h5>
					<span>23 July 2012 / <a href="#">5 Comments</a></span>					
				</div><!--end sidebar-post-->
				<div class="sidebar-post">
					<h5><a href="blog-single.html">From Inception to IPO: Facebook in 8 Years</a></h5>
					<span>06 May 2012 / <a href="#">3 Comments</a></span>	
				</div><!--end sidebar-post-->
				<div class="sidebar-post">
					<h5><a href="blog-single.html">A/B Testing: What is It?</a></h5>
					<span>12 March 2012 / <a href="#">No Comments</a></span>	
				</div><!--end sidebar-post-->
			</div>
			
			<div class="widget categories ">
				<h3>Categories</h3>
				<ul>
					<li><a href="#">Advertising</a></li>
					<li><a href="#">Marketing</a></li>
					<li><a href="#">Media</a></li>
					<li><a href="#">Small Business</a></li>
					<li><a href="#">Web Applications</a></li>
				</ul>
			</div><!--end widget-->
			
			<div class="widget tags ">
				<h3>Tags</h3>
				<ul>
					<li><a href="#">Design</a></li>
					<li><a href="#">Development</a></li>
					<li><a href="#">Mobile</a></li>
					<li><a href="#">Art</a></li>
					<li><a href="#">Photography</a></li>
					<li><a href="#">YouTube</a></li>
					<li><a href="#">Nikon</a></li>
					<li><a href="#">Twitter</a></li>
				</ul>
			</div><!--end widget-->			
			
			<div class="widget flickr-widget">
				<h3>Flickr Feed</h3>
				<div id="flickr"></div>
			</div>			
		</aside>

		<div class="clear"></div>
	</div><!--end centered-wrapper-->
	
	<div class="space"></div>
	
	<footer id="footer">
		<div class="centered-wrapper">
			<div id="topfooter">
				<div class="one-half">
					<h3>About Us</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam veritatis et quasi nam liber tempore.</p>
					<div class="footer-logo"></div>
				</div><!--end percent-one-half-->
				<div class="one-half column-last">
					<div class="percent-one-half">
						<h3>We are on Twitter</h3>
						<div class="tweet1"></div>
					</div>
					
					<div class="percent-one-half column-last">
						<h3>Get in Touch with Us</h3>
						<ul>
							<li>Address: 1600 Amphitheatre Parkway, Mountain View, CA 94043</li>
							<li>Phone: +321 123 456 7<br/>
							E-mail: <a href="mailto:">johndoe@ipsum.com</a></li>
						</ul>
					</div><!--end one-half-->					
				</div><!--end one-half-->
			</div><!--end topfooter-->
		</div><!--end centered-wrapper-->
		
		<div id="bottomfooter">		
			<div class="centered-wrapper">		
				<div class="one-half">
					<p>COPYRIGHT &copy; 2013 - SYMPATHIQUE | ALL RIGHTS RESERVED. - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
				</div><!--end one-half-->

				<div class="one-half column-last">
					<ul id="social">
						<li><a class="rss" href="#">RSS Feed</a></li>
						<li><a class="facebook" href="#">Facebook</a></li>
						<li><a class="twitter" href="#">Twitter</a></li>
						<li><a class="flickr" href="#">Flickr</a></li>
						<li><a class="google" href="#">Google</a></li>
						
					<!-- You can add social icons for forrst, dribbble, vimeo, linkedin and skype. Take the ones you need from the list and paste them above
					
						<li><a class="forrst" href="#">Forrst</a></li>
						<li><a class="dribbble" href="#">Dribbble</a></li>
						<li><a class="vimeo" href="#">Vimeo</a></li>
						<li><a class="linkedin" href="#">LinkedIn</a></li>
						<li><a class="skype" href="#">Skype</a></li> 
					-->	
					</ul>					
				</div><!--end one-half-->
			</div><!--end centered-wrapper-->				
		</div><!--end bottomfooter-->
	</footer><!--end footer-->	
	
</div><!--end wrapper-->
</body> 
</html>